<script setup lang="ts">
import { reactive } from "vue";
import { guild_roomApi } from "@/api/controller";
import { ToastWarning, Toastloading } from "@/utils/public";
import Pagination from "@/components/Pagination/index.vue";
import table2excel from 'js-table2excel';

const action = reactive({
  dialogFormVisible: false,
  room_id: 0,
  total: 0,
  list: [],
  title:'',
  dateType: "daterange",
  weekFormat: "YYYY-MM-DD",
});
const listQuery = reactive({
  page: 1,
  limit: 20,
  value: "",
  date_type: "month",
})
const dateTypeOptions = [
  { label: "日", value: "day" },
  { label: "周", value: "week" },
  { label: "月", value: "month" },
  { label: "年", value: "year" },
];
const handleSerach = () => {
  listQuery.page = 1;
  getList();
};
const resetQuery = () => {
  Object.assign(action, {
    page: 1,
    list: [],
    value: "",
    date_type: "month",
  });
};
const handleDownload = ()=>{
  const tHeader = [{
    title: '日期',
    key: "date",
    type: "text"
  }, {
    title: '总开厅时长',
    key: "total_time",
    type: "text"
  }, {
    title: '5麦以上开厅时长',
    key: "more_five_mic_time",
    type: "text"
  }, {
    title: '5麦以下开厅时长',
    key: "less_five_mic_time",
    type: "text"
  }]
  table2excel(tHeader, action.list, action.title)
}
const editDatePicker = (value: any = "") => {
  let dateType = "";
  if (value === "week") {
    action.weekFormat = "YYYY 第 WW 周";
    dateType = value;
  } else {
    action.weekFormat = "YYYY-MM-DD";
    dateType = "daterange";
  }
  listQuery.value = dateType;
};
const getList = async () => {
  const loading = Toastloading();
  const res = await guild_roomApi.getOnlineTime(action.room_id, listQuery);
  const { data = [], total = 0 } = res.data || {};
  action.list = data;
  action.total = total;
  loading.close();
};
const openDialog = async (query: any = {}) => {
  const { room_id = 0, name='' } = query;
  if (!room_id) return ToastWarning("room_id not defing");
  action.title = `${name}房间-开厅时长`
  action.room_id = room_id;
  await getList();
  action.dialogFormVisible = true;
};
defineExpose({
  openDialog,
});
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      class="xm-dialog"
      v-model="action.dialogFormVisible"
      width="60%"
      :title="action.title"
    >
      <div class="labelBox">
        <div class="labelItem">
          <el-select v-model="listQuery.date_type" placeholder="类型" class="el-input-w60">
            <el-option
              v-for="(option, key) of dateTypeOptions"
              :key="key"
              :label="option.label"
              :value="option.value"
              @click.native="editDatePicker(option.value)"
            />
          </el-select>
        </div>
        <div class="labelItem">
          <el-date-picker
            v-model="listQuery.value"
            :type="action.dateType"
            :format="action.weekFormat"
            range-separator="至"
            placeholder="选择周"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach"
            >查询</el-button
          >
          <el-button type="primary" @click="resetQuery"
            >重置</el-button
          >
          <el-button type="warning" @click="handleDownload"
            >导出</el-button
          >
        </div>
      </div>
      <el-table class="xm-TableCenter" :data="action.list" border height="450px">
        <el-table-column prop="date" label="日期"  />
        <el-table-column prop="total_time" label="总开厅时长" />
        <el-table-column prop="more_five_mic_time" label="5麦以上开厅时长" />
        <el-table-column prop="less_five_mic_time" label="5麦以下开厅时长" />
      </el-table>
      <Pagination
      v-show="action.total > 0"
      :total="action.total"
      v-model:page="listQuery.page"
      v-model:limit="listQuery.limit"
      @pagination="getList" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.xm-dialog) {
  .labelBox {
    width: 100%;
  }
  .el-dialog__body {
    padding: 10px 20px 20px;
  }
}
</style>
